<template>
  <div class="main">
    <div class="title">按钮管理</div>
    <div class="headerInput">
      <a-form layout="inline" style="width:100%">
        <a-form-item label="Find" class="searchInputBox">
          <a-input placeholder v-model.trim="searchText" allowClear />
        </a-form-item>
        <a-form-item class="ml300">
          <a-button type="primary" @click="search">Search</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="add">Add</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="tableSection">
      <a-table :data-source="tableData" :customRow="clickKindTable" :pagination="false">
        <a-table-column key="ButtonId" title="ButtonId" data-index="ButtonId" />
        <a-table-column key="ButtonName" title="ButtonName" data-index="ButtonName" />
        <a-table-column key="Description" title="Description" data-index="ButtonDescribe" />
        <a-table-column key="CreateTime" title="CreateTime" data-index="CreateTime" />
        <a-table-column key="action" title="Action">
          <template slot-scope="text, record">
            <span>
              <a-button type="primary" @click="editMoudule(text,record)">Edit</a-button>
              <a-button type="primary" class="ml50" @click="delMoudule(text,record)">Delete</a-button>
            </span>
          </template>
        </a-table-column>
      </a-table>

      <a-pagination
        v-model="currentPage"
        show-size-changer
        show-quick-jumper
        :page-size.sync="pageSize"
        :total="totalCount"
        @showSizeChange="changePage"
        @change="changePage"
        class="pagination"
      />
    </div>
    <!-- 弹窗 -->
    <a-modal v-model="modalVisiable" :title="ModalTitle" @ok="handleOk" :maskClosable="false">
      <div>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="ButtonName">
            <a-input placeholder v-model.trim="ButtonName" allowClear />
          </a-form-item>
          <a-form-item label="ButtonId" v-if="doType==='add'">
            <a-input placeholder v-model.trim="ButtonId" allowClear />
          </a-form-item>
          <a-form-item label="ButtonId" v-if="doType==='edit'">
            <a-input placeholder v-model.trim="ButtonId" disabled />
          </a-form-item>
          <a-form-item label="ButtonDescribe">
            <a-input placeholder v-model="ButtonDescribe" allowClear />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { parse } from 'querystring'
export default {
  data() {
    return {
      searchText: '',
      tableData: [],
      pageSize: 10,
      totalCount: 0,
      currentPage: 1,
      modalVisiable: false,
      labelCol: {
        xs: { span: 28 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      ButtonName: '',
      ButtonId: '',
      ButtonDescribe: '',
      ModalTitle: '',
      doType: '',
    }
  },
  watch: {
    searchText() {
      this.debounce()
    },
  },
  created() {
    this.getTableData()
  },
  methods: {
    debounce() {
      setTimeout(() => {
        this.getTableData()
      }, 800)
    },
    changePage(current, pageSize) {
      this.currentPage = current
      this.pageSize = pageSize
      this.getTableData()
    },
    search() {
      this.currentPage = 1
      this.getTableData()
    },
    add() {
      this.doType = 'add'
      this.ModalTitle = 'Add Button'
      // 清空参数
      this.ButtonId = ''
      this.ButtonName = ''
      this.ButtonDescribe = ''
      this.modalVisiable = true
    },
    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    // 编辑模组
    editMoudule(item, index) {
      this.doType = 'edit'
      this.ButtonName = item.ButtonName
      this.ButtonId = item.ButtonId
      this.ButtonDescribe = item.ButtonDescribe
      this.ModalTitle = 'Edit Button'
      this.modalVisiable = true
    },
    //删除模组
    delMoudule(item, index) {
      console.log(item, 'del')
      this.doType = 'del'
      const that = this
      const a = {
        method: 'SysButton_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          ButtonId: item.ButtonId,
        },
      }

      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getTableData()
            }
          })
        },
      })
    },
    getTableData() {
      const a = {
        queMode: 'OR',
        method: 'SysButton_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        limit: this.pageSize,
        language: window.language || 1,
        orderByList: 'ButtonId',
        datas: this.searchText
          ? {
              ButtonName: `%${this.searchText}%`,
              ButtonId: `%${this.searchText}%`,
              ButtonDescribe: `%${this.searchText}%`,
            }
          : {},
      }
      this.$post(a).then((result) => {
        this.tableData = result.data.length > 0 ? result.data : []
        this.totalCount = result.count
        this.tableData.map((item) => {
          item.CreateTime = item.CreateTime.replace('T', ' ').split('.')[0]
        })
      })
    },
    handleOk() {
      if (!this.ButtonName) {
        this.$message.warn('Please enter the ButtonName')
        return
      } else if (!this.ButtonId && this.doType === 'add') {
        this.$message.warn('Please enter the ButtonId')
        return
      } else if (!this.ButtonDescribe) {
        this.$message.warn('Please enter the ButtonDescribe')
        return
      }
      if (this.doType === 'add') {
        this.addInfo()
      } else if (this.doType === 'edit') {
        this.editInfo()
      }
      this.modalVisiable = false
    },
    addInfo() {
      const a = {
        method: 'SysButton_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          ButtonId: this.ButtonId,
          ButtonName: this.ButtonName,
          ButtonDescribe: this.ButtonDescribe,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getTableData()
        }
      })
    },
    editInfo() {
      const a = {
        method: 'SysButton_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          ButtonId: this.ButtonId,
          ButtonName: this.ButtonName,
          ButtonDescribe: this.ButtonDescribe,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getTableData()
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.main {
}
.ml50 {
  margin-left: 28px;
}
.headerInput {
  display: flex;
  width: 100%;
  align-items: center;
  .searchInputBox {
    input {
      width: 280px;
    }
  }
  .ml300 {
    margin-left: 180px;
  }
  .ml50 {
    margin-left: 28px;
  }
}
.tableSection {
  margin-top: 30px;
}

.pagination {
  margin-top: 38px;
  position: absolute;
  right: 100px;
}
</style>